Add accessibility checker (axe-core) in the exercise editor #3167
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ctions. Update issues panel to display a11y issues. Add button to issue panel for manual running of a11y check.
…accessibility checker (axe-core) in the exercise editor
…n to toggle/switch in editor for running axe-core. Add a name to the iframe that contains the content preview so that referencing it is easier. Adjust how axe-core results are surface via the toggle in the issues panel.
Contributor
🗄️ Schema Change: No Changes ✅ |
Contributor
|
Size Change: +2.1 kB (+0.42%) Total Size: 499 kB
ℹ️ View Unchanged
|
Contributor
🛠️ Item Splitting: No Changes ✅ |
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (3a23d90) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3167If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3167If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3167 |
…ages to only have one occurrence in the description. Account for multiple preview iFrames in the DOM in the editor.
… for iframe (reference a variable instead of hard-coding it). Add debug message for axe-core options.
…r for iframe to distinguish the question preview from all the other iframes on the page.
…lement for real-time parameter adjustments.
…for non-Storybook execution to access the axe-core object within the iframe itself.
…ntainer not included in the issue nodes selector tree.
…nto LEMS-3822-add-a11y-checker-to-exercise-editor
…nts for a given issue.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
This PR implements the axe-core accessibility library, and automatically runs the checker. However, results are not shown in the Issues panel unless the toggle button is set "On". The reason for defaulting to "Off" is to provide a kind of feature flag option for this feature. The current accessibility results are somewhat noisy, in that content creators can't necessarily address all the issues that are discovered. Once this PR is implemented, time will be spent assessing the results of the scans and either resolving them or writing tickets for follow-up. At some future point, this automated scan will be defaulted to "On" for all content creators, and expanded to other editors (i.e. the Article and Assessments editors).
Issue: LEMS-3822
Test plan: